<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="../../../vendor/angular/angularjs.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <style>
        .odd {
            background-color: blue;
        }
        .even {
            background-color: red;
        }
        input.ng-invalid {
            border: 1px solid red;
        }
        input.ng-valid {
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div ng-app="myApp"
     ng-init="someProperty = 'some data'"></div>
<div ng-init="siblingProperty='moredata'">
    Inside Div Two: {{ aThirdProperty }}
    <div ng-init="aThirdProperty = 'data for 3rd property'"
         ng-controller="SomeController">
        Inside Div Three: {{ aThirdProperty }}
        <div ng-controller="SecondController">
            Inside Div Four: {{ aThirdProperty }}
            <br>
            Outside myDirective: {{ myProperty }}
            <div my-directive ng-init="myProperty = 'wow, this is cool'">
                Inside myDirective: {{ myProperty }}
            </div>
        </div>
    </div>
</div>
<br/>part2: 隔离作用域<br/>
<div ng-controller='MainController'>
    Outside myDirective: {{ aProperty }}
    <div a-directive ng-init="aProperty = 'wow, this is cool'">
    </div>
</div>


</body>

</html>